<template>
	<view class="completion-container" :style="{ minHeight: windowHeight + 'px' }">
		<u-navbar back-icon-color="#fff" :back-text-style="{ color: '#fff' }" :is-back="!userInfo.authentication" :immersive="true" back-text="上一步" :custom-back="backStep" :background="{ background: 'rgba(255,255,255,0)' }" :is-fixed="true" :border-bottom="false"></u-navbar>
		<view class="completion-head" :style="{ backgroundImage: `url(${staticFileDomain}/static/image/completion-head-finish.png)` }"></view>
		<view class="completion-body">
			<view class="completion-body-text">选择身份</view>
			<view class="completion-body-switch">
				<view class="completion-body-switch-item" :class="{ checked: login_identity == 10 }" @tap="switchIdentity(10)">
					<view class="completion-body-switch-text flex-center-horizontal">我是单身</view>
					<view class="completion-body-switch-button flex-center-horizontal">
						<image class="completion-body-switch-border" :src="`${staticFileDomain}/static/image/completion-role-border.png`" />
						<view class="completion-body-switch-background"></view>
						<view class="completion-body-switch-chunk flex-center-horizontal"><image :src="`${staticFileDomain}/static/image/completion-role-single.png`" mode="aspectFit"></image></view>
					</view>
				</view>
				<view class="completion-body-switch-item " :class="{ disable: !userInfo.authentication, checked: login_identity == 20 }" @tap="switchIdentity(20)">
					<view class="completion-body-switch-text flex-center-horizontal matchmaker-text">成为红娘</view>
					<view class="completion-body-switch-button flex-center-horizontal">
						<image class="completion-body-switch-border" :src="`${staticFileDomain}/static/image/completion-role-border.png`" />
						<view class="completion-body-switch-background"></view>
						<view class="completion-body-switch-chunk flex-center-horizontal"><image :src="`${staticFileDomain}/static/image/completion-role-matchmaker.png`" mode="aspectFit"></image></view>
					</view>
				</view>
			</view>
		</view>
		<view class="completion-complete" :style="{ paddingBottom: safeAreaBottomHeight + 'px' }">
			<view class="completion-complete-text" v-if="!userInfo.authentication">申请成为红娘必通过实名认证</view>

			<view class="completion-complete-btn flex-center-horizontal" @tap="onComplete">{{ completeBtnText }}</view>
		</view>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
import { initIMService } from '@/store/dispatches.js';
export default {
	data() {
		return {
			windowHeight: null,
			safeAreaBottomHeight: 0,
			login_identity: 10
		};
	},
	computed: {
		completeBtnText: function() {
			if (this.login_identity == 10) {
				return '立 即 使 用';
			} else {
				return '申 请 成 为 红 娘';
			}
		}
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		this.windowHeight = systemInfo.windowHeight;
		this.getSafeAreaBottomHeight = Tools.getSafeAreaBottomHeight();
	},
	methods: {
		switchIdentity(identity) {
			if (identity == 20) {
				if (!this.userInfo.authentication) {
					this.$u.toast('请先完成实名认证');
					return false;
				}
			}
			this.login_identity = identity;
		},
		onComplete() {
			if (this.login_identity == 10) {
				this.$u.api.setFirstIdentity().then(res => {
					this.refreshUserInfo();
				});
			} else {
				this.navigateTo({
					url: '/pageSupport/apply/matchmaker'
				});
			}
		},
		completeUserInfo() {
			this.reLaunch();
			initIMService();
		},
		backStep() {
			this.$emit('input', !!this.userInfo.authentication ? 0 : 1);
		}
	}
};
</script>

<style lang="scss">
.completion-body {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.completion-body-switch {
	margin-top: 294rpx;
	width: 516rpx;
	display: flex;
	justify-content: space-between;
	.completion-body-switch-item {
		width: 227rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.completion-body-switch-text {
			height: 45rpx;
			font-size: 34rpx;
			font-weight: 400;
			margin-bottom: 38rpx;
			font-weight: 700;
			&.matchmaker-text {
				color: $theme-main-color;
			}
		}
		.completion-body-switch-button {
			width: 227rpx;
			height: 227rpx;
			overflow: visible;
			position: relative;
			.completion-body-switch-border {
				height: 229rpx;
				width: 229rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%) scale(1.1) rotate(360deg);
				opacity: 0;
				transition: opacity 0.2s ease, transform 0.3s ease-in;
			}
			.completion-body-switch-background {
				width: 227rpx;
				height: 227rpx;
				background: linear-gradient(252deg, rgba(255, 179, 54, 0.4) 0%, rgba(248, 89, 98, 0.4) 100%);
				border-radius: 163rpx;
				transform-origin: center;
				z-index: 1;
				transition: width 0.2s ease, height 0.2s ease;
			}
			.completion-body-switch-chunk {
				z-index: 20;
				width: 160rpx;
				height: 160rpx;
				background: #ffffff;
				border-radius: 35rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				transition: background-color 0.15s ease;
				image {
					width: 110rpx;
					height: 110rpx;
				}
			}
		}
		&.checked {
			.completion-body-switch-border {
				opacity: 1;
				display: block;
				transform: translate(-50%, -50%) scale(1);
			}
			.completion-body-switch-background {
				width: 160rpx;
				height: 160rpx;
			}
			.completion-body-switch-chunk {
				background: rgba(255, 255, 255, 0);
			}
		}
		&.disable {
			filter: grayscale(100%);
			filter: gray;
			opacity: 0.7;
		}
	}
}
.completion-complete {
	position: absolute;
	width: 750rpx;
	left: 0;
	bottom: 100rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	.completion-complete-text {
		color: $theme-main-color;
		font-size: 23rpx;
		margin-bottom: 20rpx;
		opacity: 0.8;
	}
	.completion-complete-btn {
		width: 500rpx;
		height: 80rpx;
		background: linear-gradient(180deg, #ed4f5d 0%, #fb7a8e 100%);
		border-radius: 90rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;
		font-size: 32rpx;
	}
}
</style>
